doctype html
html
	head
		title Miaou - Preferences
		meta(name="viewport",content="initial-scale=1, maximum-scale=1")
		link(rel="icon",type="image/png",href="static/M-32.png")
		link(rel='stylesheet', href='static/themes/'+theme+'/miaou.css')
		script(src="static/jquery-2.1.3.min.js")
		script#locals(type="Application/JSON") !{JSON.stringify(vars)}
		script(src="static/miaou.min.js")
		script(src="static/prefs.min.js")
		style.
			.CL, .CR {
				background: $bg-color;
				width: 50%;
				padding: 2px;
				display: table-cell;
				vertical-align: top;
			}
			.CC {
				padding: 2px;
			}
			code {
				white-space: pre-wrap;
			}
	body.prefs
		section#prefs-top
			.MP
				object.Miaou-logo#Prefs-logo(type="image/svg+xml",data="static/Miaou.svg")
				p.links
					| You're logged as
					span.username= user.name
					| -
					a(id="logout",href="#") Log Out
					| -
					a(href="help#About",target=help) Help
		section#prefs-notifs
			.MP
				h2 Preferences
				p#err.error= error

		.home-tabs.MP
			.home-tab.selected Profile
			.home-tab Identities
			.home-tab Avatar
			.home-tab Notifications
			.home-tab Display
			.home-tab Watch
			
		section#prefs-main.hastabs
			#prefs-main-content
				form(method="post")
					input(type="hidden", name="secret", value=secret)
					.home-page.selected
						table.form
							tr
								th Name
								td
									input#name(type="text", name="name", value=suggestedName, pattern="\\w[\\w_\\-\\d]{2,19}")
							tr
								th About me
								td
									input#description(type="text", name="description", maxlength="250")
							tr
								th Prefered Language
								td
									select#lang(name="lang")
							tr
								th Location
								td
									input#location(type="text", name="location", value="", maxlength="250")
							tr
								th Web Site
								td
									input#url(type="url", name="url", value="", maxlength="250")
					.home-page.externalProfiles
						p If you have an account on one of those sites, you may display it in your Miaou profile by proving ownership below.
						table.form
							each ep in externalProfileInfos
								tr
									th= ep.name
								tr
									td
										if ep.html
											div.externalProfile !{ep.html}
											div.inputs
												- var cbid = "remove_"+ep.name
												input(type="checkbox",name=cbid,id=cbid)
												label(for=cbid) Remove this profile
										else
											table
												each field in ep.fields
													tr
														td
															label= field.label+'\u2009: '
														td
															input(type=(field.type||'text'),name=field.name)
														if field.notice
															td= field.notice
											if ep.creationDescription
												p !{ep.creationDescription}
					.home-page.avatar
						#avatar-edit.MP
							#avatar-fields
								.avatar-fields-row
									label(for="avatar-src") Source:
									select#avatar-src(name="avatar-src")
										option(value="none") none
								.avatar-fields-row
									label#avatar-key-label(for="avatar-key")
									input#avatar-key(name="avatar-key")
								.avatar-fields-row
									p#avatar-src-description
								.avatar-fields-row
									button(type="button")#avatar-try Try
							#avatar-preview
					.home-page
						table.form
							tr
								th Desktop Notification
								td
									input#notif_never(type="radio", name="notif", value="never")
									label(for="notif_never") Never
									br
									input#notif_on_ping(type="radio", name="notif", value="on_ping")
									label(for="notif_on_ping") When you're pinged or replied to (<i>highly recommended</i>)
									br
									input#notif_on_message(type="radio", name="notif", value="on_message")
									label(for="notif_on_message") Whenever a message is posted in an open room
							tr
								th Show Message Content in Desktop Notification
								td
									select#connot(name="connot")
										option(value="yes") yes
										option(value="no") no
							tr
								th Notification Sound
								td
									select#volume(name="volume")
										option(value="0") none
										option(value=".1") very quiet
										option(value=".4") quiet
										option(value=".7") standard
										option(value="1") strong
									button(type="button")#try-sound Try
							tr
								th When Tab Is Visible 
								td
									select#nifvis(name="nifvis")
										option(value="no") no notification
										option(value="yes") notify too
					.home-page
						table.form
							tr
								th Message Chat Theme
								td
									select#theme(name="theme")
										option(value="default") default
										each theme in themes
											option(value=theme)= theme
							tr
								th Message Date Display
								td
									input#date_display_hover(type="radio", name="datdpl", value="hover")
									label(for="date_display_hover") On hover
									br
									input#date_display_on_break(type="radio", name="datdpl", value="on_breaks")
									label(for="date_display_on_break") On breaks
									br
									input#date_display_always(type="radio", name="datdpl", value="always")
									label(for="date_display_always") Always
							//- tr
							//- 	th Message Mobile Interface
							//- 	td
							//- 		select#beta(name="beta")
							//- 			option(value="default") default
							//- 			option(value="yes") Experimental Interface
					.home-page
						table.form
							tr
								th Auto-watch rooms
								td
									select#otowat(name="otowat")
										option(value="on_visit") When visiting the room
										option(value="on_post") When posting in the room
										option(value="never") Never
					.dialog-buttons
						button#submit Save
						button#close Home
